<script setup>
import {ref,onMounted} from "vue";
import {cancleFav, getArticelDetail, getFavorite} from "@/apis/article";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const router = useRouter()
const favArticle = ref([])
const getFav = async () => {
  const res = await getFavorite()
  console.log(res)
  favArticle.value = res.data
}
onMounted(()=>{
  getFav()
})

//取消收藏
const cancleCollect = async (id)=>{
  const res = await cancleFav(id)
  ElMessage({type:'success',message:res.message})
  getFav()
}
//访问文章细节
const seeDetail = async (articleid) => {
  const res = await getArticelDetail(articleid)
  if (res.code == 200) {
    router.push({path: '/detail',query:{articleid:articleid}})
  } else {
    ElMessage({type: 'warn', message: '你所访问的文章已经被删除'})
  }
}
//收藏
const collect = async (id)=>{
  const res =await addFavArticle(id)
  console.log(res)
  if(res.code == 200){
    ElMessage({type:'success',message:res.message})
  }else{
    ElMessage({type:'error',message:res.message})
  }
}

</script>
<template>
  <div class="favorite">
    <el-card class="box-card" v-for="item in favArticle" :key="item.id">
      <div class="card-header">
        <span>文章名称：{{item.title}}</span>
        <span>点赞数量：{{item.likes}}</span>
        <span>作者：{{item.nickname}}</span>
        <div style="margin: 5px 0;display: flex;flex-direction: row">
          <el-button type="primary" @click="seeDetail(item.articleId)" size="small" style="width: 50%">查看详情</el-button>
          <el-button type="danger" size="small" style="width: 50%" @click="cancleCollect(item.id)">取消收藏</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
}

.box-card {
  width: 30%;
  height: 200px;
  margin: 50px;

}

.favorite {
  margin-left: 200px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

span {
  margin: 6px;
}
</style>le>